<!DOCTYPE html>
<html>

<head>
    <title>Baymax</title>
    <style>
    .container {
        width: 500px;
        height: 600px;
        margin: auto;
        background: #ccc;
    }
    
    .baymax {
        position: relative;
        width: 500px;
        height: 600px;
    }
    
    .baymax .head {
        position: relative;
        left: 180px;
        top: 40px;
        width: 150px;
        height: 100px;
        border: none;
        border-radius: 50%;
        background: #fff;
        box-shadow: 2px 2px 2px;
        z-index: 101;
    }
    
    .baymax .head.wonder {
        animation: wonder-move 1s ease 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes wonder-move {
        0% {
            top: 40px;
            transform: rotateZ(0deg);
        }
        100% {
            top: 45px;
            transform: rotateZ(-10deg);
        }
    }
    
    .baymax .eye-left {
        position: absolute;
        top: 30px;
        left: 30px;
    }
    
    .baymax .eye-right {
        position: absolute;
        top: 30px;
        left: 100px;
    }
    
    .baymax .eye {
        position: relative;
        top: 5px;
        width: 10px;
        height: 15px;
        border: 5px solid #000;
        border-radius: 50%;
        background: #000;
        color: #fff;
    }
    
    .baymax .eye.blink {
        animation: blink-move 0.5s ease alternate infinite;
    }
    
    @keyframes blink-move {
        0% {
            top: 5px;
            height: 15px;
        }
        100% {
            top: 12px;
            height: 0px;
        }
    }
    
    .baymax .eye.smile {
        animation: smile-move 1s ease 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes smile-move {
        0% {
            border-bottom: 5px solid #000;
            background: #000;
        }
        100% {
            border-bottom: 5px solid transparent;
            background: transparent;
        }
    }
    
    .baymax .eye.greed {
        animation: greed-move 0.5s ease alternate infinite;
    }
    
    @keyframes greed-move {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.5);
        }
    }
    
    .baymax .eye.angry {
        animation: angry-move 1s ease 1;
        animation-fill-mode: forwards;
    }
    
    @keyframes angry-move {
        0% {
            height: 15px;
            border-radius: 50%;
        }
        100% {
            height: 0;
            border-radius: 10%;
        }
    }
    
    .baymax .eye-line {
        position: absolute;
        top: 45px;
        left: 45px;
        width: 60px;
        height: 5px;
        border: none;
        background: #000;
    }
    
    .baymax .body {
        position: relative;
        top: 5px;
        left: 105px;
        width: 300px;
        height: 350px;
        border: 1px solid #aaa;
        border-left: none;
        border-right: none;
        border-radius: 60% 60% 50% 50%;
        background: #fff;
        box-shadow: 2px 2px 2px;
        z-index: 100;
    }
    
    .baymax .body .menu {
        position: absolute;
        top: 50px;
        left: 200px;
        width: 30px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 50%;
    }
    
    .baymax .body .menu:hover {
        background: #79AF14;
    }
    
    .baymax .body .menu:active {
        background: #126F15;
    }
    
    .baymax .body .menu-list {
        position: absolute;
        top: 90px;
        left: 75px;
        width: 150px;
        height: 100px;
        background: #ccc;
        border-radius: 3px;
        display: none;
        animation: menu-list-move 1s ease 0s 1;
    }
    
    @keyframes menu-list-move {
        0% {
            transform: scale(0);
        }
        100% {
            transform: scale(1);
        }
    }
    
    .baymax .body .menu-list button {
        width: 60px;
        height: 20px;
        margin: 5px;
        border: none;
        border-radius: 5px;
        text-align: center;
        line-height: 20px;
        font-family: cursive;
        background: #1A8ECE;
        cursor: pointer;
    }
    
    .baymax .body .menu-list button:hover {
        background: #18A1D2;
    }
    
    .baymax .body .menu-list button:active {
        background: #136582;
    }
    
    .baymax .arm-left {
        position: absolute;
        top: 150px;
        left: 80px;
        transform: rotateZ(25deg);
    }
    
    .baymax .arm-right {
        position: absolute;
        top: 150px;
        left: 360px;
        transform: rotateZ(-25deg);
    }
    
    .baymax .arm {
        width: 70px;
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 80% 80% 30% 30%;
        background: #fff;
        box-shadow: 2px 2px 2px;
    }
    
    .baymax .hand-left {
        position: relative;
        top: 190px;
        left: 9px;
        width: 70px;
        height: 30px;
        background: transparent;
        z-index: 101;
    }
    
    .baymax .hand-left1 {
        width: 14px;
        height: 25px;
        border-radius: 0 0 70% 70%;
        background: #fff;
        float: left;
        transform: rotateZ(-20deg);
    }
    
    .baymax .hand-left2 {
        width: 13px;
        height: 30px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
    }
    
    .baymax .hand-left3 {
        width: 13px;
        height: 30px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
    }
    
    .baymax .hand-left4 {
        width: 13px;
        height: 28px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
        transform: rotateZ(10deg);
    }
    
    .baymax .hand-right {
        position: relative;
        top: 190px;
        left: 8px;
        width: 70px;
        height: 30px;
        background: transparent;
        z-index: 101;
    }
    
    .baymax .hand-right1 {
        width: 14px;
        height: 25px;
        border-radius: 0 0 70% 70%;
        background: #fff;
        float: left;
        transform: rotateZ(20deg);
    }
    
    .baymax .hand-right2 {
        width: 13px;
        height: 30px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
    }
    
    .baymax .hand-right3 {
        width: 13px;
        height: 30px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
    }
    
    .baymax .hand-right4 {
        width: 13px;
        height: 28px;
        border-radius: 0 0 50% 50%;
        background: #fff;
        float: left;
        transform: rotateZ(-10deg);
    }
    
    .baymax .foot-left {
        position: relative;
        top: -20px;
        left: 180px;
        width: 60px;
        height: 70px;
        border: none;
        border-radius: 40%;
        background: #fff;
        box-shadow: 1px 1px 1px;
        float: left;
    }
    
    .baymax .foot-right {
        position: relative;
        top: -20px;
        left: 210px;
        width: 60px;
        height: 70px;
        border: none;
        border-radius: 40%;
        background: #fff;
        box-shadow: 1px 1px 1px;
        float: left;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="baymax">
            <div class="head">
                <div class="eye-left">
                    <div class="eye">
                    </div>
                </div>
                <div class="eye-line"></div>
                <div class="eye-right">
                    <div class="eye">
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="menu" onclick="baymax.showMenu()">
                    <svg width="30" height="30">
                        <polyline points="0,15 8,15 8,10 22,10 22,15 30,15" style="fill:white;stroke:black;stroke-width:1" />
                    </svg>
                </div>
                <div class="menu-list">
                    <button onclick="baymax.setState('blink')">blink</button>
                    <button onclick="baymax.setState('smile')">smile</button>
                    <button onclick="baymax.setState('wonder')">wonder</button>
                    <button onclick="baymax.setState('greed')">greed</button>
                    <button onclick="baymax.setState('angry')">angry</button>
                    <button onclick="baymax.setState('normal')">normal</button>
                </div>
            </div>
            <div class="arm-left">
                <div class="arm">
                    <div class="hand-left">
                        <div class="hand-left1"></div>
                        <div class="hand-left2"></div>
                        <div class="hand-left3"></div>
                        <div class="hand-left4"></div>
                    </div>
                </div>
            </div>
            <div class="arm-right">
                <div class="arm">
                    <div class="hand-right">
                        <div class="hand-right4"></div>
                        <div class="hand-right3"></div>
                        <div class="hand-right2"></div>
                        <div class="hand-right1"></div>
                    </div>
                </div>
            </div>
            <div class="foot-left"></div>
            <div class="foot-right"></div>
        </div>
    </div>
    <script>
    'use strict';

    (function($) {
        function Baymax() {
            this.baymax = null;
            this.menu = null;
            this.eyes = null;
            this.head = null;
            this.emotion = null;
            this.hasMenu = false;
            this.normal = {
                eye: 'eye',
                head: 'head'
            }
            this.state = {
                blink: 'blink',
                smile: 'smile',
                wonder: 'wonder',
                greed: 'greed',
                angry: 'angry'
            }
        }

        Baymax.prototype.init = function(baymax, menu, head, eyes) {
            this.baymax = baymax;
            this.menu = menu;
            this.head = head;
            this.eyes = eyes;
        }

        Baymax.prototype.showMenu = function() {
            var menu = this.menu;
            if (this.hasMenu) {
                menu.style.display = 'none';
            } else {
                menu.style.display = 'block';
            };

            this.hasMenu = !this.hasMenu;
        }

        Baymax.prototype.changeEye = function(className) {
            var eyes = this.eyes;
            var eyeClass = this.normal.eye;
            [].forEach.call(eyes, function(item) {
                item.className = eyeClass + ' ' + className;
            })
        }

        Baymax.prototype.changeEyeContent = function(content) {
            var eyes = this.eyes;
            [].forEach.call(eyes, function(item) {
                item.innerHTML = content;
            })
        }

        Baymax.prototype.changeHead = function(className) {
            var head = this.head;
            var handClass = this.normal.head;
            head.className = handClass + ' ' + className;
        }

        Baymax.prototype.clean = function() {
            var eyes = this.eyes;
            var head = this.head;
            var normal = this.normal;
            [].forEach.call(eyes, function(item) {
                item.className = normal.eye;
                item.innerHTML = '';
            })
            head.className = normal.head;
        }

        Baymax.prototype.setState = function(emotion) {
            this.emotion = emotion;
            this.clean();
            var state = this.state[emotion];
            switch (emotion) {
                //眨眼
                case 'blink':
                    this.changeEye(state);
                    break;
                    //笑
                case 'smile':
                    this.changeEye(state);
                    break;
                    //疑惑
                case 'wonder':
                    this.changeEyeContent('?');
                    this.changeHead(state);
                    break;
                    //贪婪
                case 'greed':
                    this.changeEyeContent('$');
                    this.changeEye(state);
                    break;
                    //生气
                case 'angry':
                    this.changeEye(state);
                    break;
                default:
                    break;
            }
        }

        $.Baymax = Baymax;
    })(window);

    (function($) {
        var baymax = document.querySelector('.baymax');
        var menu = baymax.querySelector('.body .menu-list');
        var head = baymax.querySelector('.head');
        var eyes = baymax.querySelectorAll('.eye');
        $.baymax = new Baymax();
        $.baymax.init(baymax, menu, head, eyes);
    })(window);
    </script>
</body>

</html>